@import '@/assets/styles/variables.module.scss';
// 信息提示区域样式定义
.info{
    // 搜索PDF按钮样式
    .searchPdf{
      color:#409EFF ; // 按钮文字颜色设置为蓝色
    }
  }
  
  // 文本居中样式
  .center{
    text-align: center; // 将文本内容居中对齐
  }
  
  // 家属信息表格样式定义
  .family{
    width: 100%; // 占满可用宽度
    box-sizing: border-box;
    // 表头样式
    .tableHead{
      display: flex; // 使用弹性布局使得表头元素水平排列
      background-color: var(--el-bg-color-overlay, #f3f8f9); // 使用CSS变量，支持主题切换
      height: 50px; line-height: 50px; // 设置表头高度及行高以适应内容
      font-size: 14px; // 字体大小设置为14px
      justify-content: flex-start; // 左对齐，避免与表体列错位
      padding: 0; // 表头不设整体内边距，避免与表体列错位
      text-align: center;
      width: 100%;
      &>div{
        flex: 1;
      }
      // 调整列宽比例（项目名称/期望服务时间/执行周期/执行频次/操作）
      &>div:nth-child(1){ flex: 3; padding: 0 8px; }
      &>div:nth-child(2){ flex: 2; padding: 0 8px; }
      &>div:nth-child(3){ flex: 2; padding: 0 8px; }
      &>div:nth-child(4){ flex: 1.2; padding: 0 8px; }
      // 操作列固定宽度，避免占据过多空间
      &>div:nth-child(5){ flex: 0 0 80px; padding: 0 8px; }
    }
    // 表体样式
    .tableBody{
      // 表格列样式
      height: 300px;
      overflow-y: scroll;
      background-color: var(--el-bg-color, #ffffff); // 表体背景色也使用CSS变量
      width: 100%;
      .tableColumn{
        display: flex; // 使用弹性布局使得表格列元素水平排列
        justify-content: flex-start; // 左对齐，与表头对齐，避免列间隙导致错位
        height: 50px; 
        line-height: 50px; // 设置表格行高及高度以适应内容
        .column {
          flex: 1;
          text-align: center;
          padding: 0 8px;
          // 使控件宽度占满列，避免看起来比例不协调
          .el-select,
          .el-time-picker,
          .el-input-number { width: 100%; }
          .el-input-number .el-input__wrapper { width: 100%; }
          .el-select .el-input__wrapper { width: 100%; }
          .el-icon{
            font-size: 16px;
            margin:  0 5px;
            
            &.add{
              color: $--color-main;
            }
            &.delect{
              color: $red;
            }
          }
        }
        // 调整列宽比例（项目名称/期望服务时间/执行周期/执行频次/操作）
        .column:nth-child(1){ flex: 3; }
        .column:nth-child(2){ flex: 2; }
        .column:nth-child(3){ flex: 2; }
        .column:nth-child(4){ flex: 1.2; }
        // 操作列固定宽度，避免占据过多空间
        .column:nth-child(5){ flex: 0 0 80px; }
      }
    }
  }
  .elcolFlex{
    display: flex !important;
    justify-content: space-between;
    flex-wrap: wrap;
    .el-form-item{
      width: 50%;
    }
  }